<template>
  <a-layout>
    <a-layout-content style="height: calc(100vh - 88px); padding: 2px">
      <VxeBasicTable ref="TableRef" v-bind="tableOptions(PageList)">
        <template #statusAction="{ row }">
          <a-switch :checked="row.status === 1" checked-children="启用" un-checked-children="禁用" :on-change="(checked: boolean) => {
            row.pendingStatus = true;
            const newStatus = checked ? 1 : 2;
            changeStatus({ status: newStatus, id: row.id })
              .then(() => {
                row.status = newStatus;
                message.success(`成功修改状态`);
              })
              .catch(() => {
                message.error('修改状态失败');
              })
              .finally(() => {
                row.pendingStatus = false;
              });
          }"></a-switch>
        </template>
        <template #toolbar_buttons>
          <a-space :size="2" style="padding-left: 5px">
            <a-button type="primary" @click="handleEdit()"> 新增 </a-button>
            <a-button type="primary" @click="handleOpenFilter"> 过滤 </a-button>
          </a-space>
        </template>
        <template #action="{ row }">
          <a-space :size="2">
            <a-button type="dashed" size="small" @click="handleEdit(row)"> 编辑 </a-button>
            <a-button type="dashed" size="small" danger @click="handleDelete(row)">
              删除
            </a-button>
          </a-space>

        </template>
      </VxeBasicTable>
    </a-layout-content>
    <ExternalEdit v-model:visible="showEdit" :data="current" @done="reload" />
    <TableFilter ref="FilterRef" @done="reload" v-model:visible="ifSHowFilter" :filter-cols="Columns" />
  </a-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue/es';
import { messageLoading } from 'ele-admin-pro/es';
import ExternalEdit from './components/externalEdit.vue';
import { page as PageList, remove } from '@/api/application/apiConfig';
import type { AppSerialNumber } from '@/api/application/serialNumber/model';
import { useConfig } from './config';
import { changeStatus } from '@/api/application/apiConfig';

const { TableRef, FilterRef, Columns, TableFilter, tableOptions } =
  useConfig();

// 当前选中数据
const current = ref<AppSerialNumber>();

// 是否显示编辑弹窗
const showEdit = ref(false);

const ifSHowFilter = ref(false);

/* 刷新表格 */
const reload = () => {
  TableRef.value?.commitProxy('query');
};

/* 编辑 */
const handleEdit = (row?: AppSerialNumber) => {
  current.value = row;
  showEdit.value = true;
};
const handleOpenFilter = () => {
  ifSHowFilter.value = true;
};

/* 删除 */
const handleDelete = (row: AppSerialNumber) => {
  const hide = messageLoading('请求中..', 0);
  remove(row.id)
    .then((msg) => {
      hide();
      message.success(msg);
      reload();
    })
    .catch((e) => {
      hide();
      message.error(e.message);
    });
};
</script>

<script lang="ts">
export default {
  name: 'AppSerialNumber'
};
</script>
